{extend name="public/base" /}
{block name="content"}
<form class="layui-form layui-form-pane form-search" action="{:url()}" onsubmit="return false" method="post"
      autocomplete="off">
    <div class="layui-form-item layui-inline">
        <label class="layui-form-label">用户id</label>
        <label class="layui-input-inline">
            <input name="member_id" value="" placeholder="" class="layui-input" type="number">
        </label>
    </div>
    <div class="layui-form-item layui-inline">
        <label class="layui-form-label">用户名</label>
        <label class="layui-input-inline">
            <input name="email" value="" placeholder="" class="layui-input" type="text">
        </label>
    </div>
    <div class="layui-form-item layui-inline">
        <label class="layui-form-label">订单号</label>
        <label class="layui-input-inline">
            <input name="pay_no" value="" placeholder="" class="layui-input" type="text">
        </label>
    </div>
    <div class="layui-form-item layui-inline">
        <label class="layui-form-label">充值状态</label>
        <div class="layui-input-inline">
            <select name="status" lay-search class="layui-select">
                <option value='0'>全部</option>
                <option value='1'>审核中</option>
                <option value='2'>通过</option>
                <option value='-1'>拒绝</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item layui-inline">
        <label class="layui-form-label">充值时间</label>
        <div class="layui-input-inline">
            <input data-date-range name="create_at" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item layui-inline">
        <button class="layui-btn layui-btn-primary"><i class="layui-icon">&#xe615;</i>搜索</button>
    </div>
</form>
<table id="Finanical" data-url="{:url('index')}" data-target-search="form.form-search"></table>
{/block}
{block name='script'}
<script>
    $(function () {
        $('#Finanical').layTable({
            even: true,
            height: 'full',
            method: 'post',
            sort: {field: 'id', type: 'desc'},
            url: "{:url('index')}",
            where: {
                pay_no: "",
                status: 0,
                create_at: "",
                email: "",
                member_id: 0
            },
            page: true,
            done: function () {
                $('.img-popup').on('click', function () {
                    var imgSrc = $(this).data('src');
                    layer.open({
                        type: 1,
                        title: false, // 不显示标题栏
                        closeBtn: 1, // 不显示关闭按钮
                        shade: 0.8, // 遮罩层透明度
                        content: '<img src="' + imgSrc + '" style="width: 100%; height: 100%;" />' // 内容
                    });
                });
            },
            cols: [[
                {checkbox: true, fixed: true},
                {field: 'id', title: 'id', align: 'center', width: 80},
                {field: 'member_id', title: '会员id', align: 'center', width: 80},
                {
                    field: 'email', title: '用户名', width: 200, align: 'center', templet: function (d) {
                        return d.member.email;
                    }
                },
                {
                    field: 'coin_name', title: '充值币种', align: 'center', templet: function (d) {
                        return d.coin.coin_name;
                    }, width: 100
                },
                {field: 'amount', title: '充值金额', align: 'center', width: 100},
                {field: 'pay_no', title: '订单号', align: 'left'},
                {
                    field: 'status_text', title: '充值状态', align: 'center'
                },
                {
                    field: 'pay_img', title: '截图', align: 'center', templet: function (d) {
                        if (!d.pay_img) {
                            return "-"
                        }
                        return `<img class="img-popup" style="height: 50px; cursor: pointer;" src="${d.pay_img}" data-src="${d.pay_img}">`;
                    }
                },
                {field: 'create_at', title: '充值时间', align: 'center'},
                {field: 'remark', title: '备注', align: 'center'},
                {toolbar: '#toolbar', title: '操作面板', align: 'center', minWidth: 180, fixed: 'right'}
            ]]
        });
        $.menu.highlight_subnav("{:url('index')}")
    });
</script>
<script type="text/html" id="toolbar">
    {{-d.status!=1 ? '已经审核' : ''}}
    <a class="layui-btn layui-btn-sm" data-event-dbclick data-title="审核"
       data-modal='{:url("audit")}?id={{d.id}}' {{-d.status!="1" ? 'style="display:none;"' : ''}}>审核</a>
</script>
{/block}
